<script setup>
import { ref, defineProps, defineEmits } from 'vue'
import { ArrowLeft, DArrowLeft, ArrowRight, DArrowRight } from '@element-plus/icons-vue'
// 接收父组件传过来的数据
const props = defineProps({
  work_time_month: {
    type: String,
    default: '2023-01'
  }
})
const _month_time = ref(props.work_time_month)
const emit = defineEmits(['onChangeTime'])
// 月份改变事件 传递到父组件
const onChange = (val) => {
  emit('onChangeTime', val)
}
//根据传过来的年月时间，加减一个月
const onAddMonth = (val, modality) => {
  let _time = val
  let _year = parseInt(_time.substring(0, 4))
  let _month = parseInt(_time.substring(5, 7))
  if (modality == 'add') {
    _month + 1
    if (_month == 12) {
      _month = 1
      _year = _year + 1
    } else {
      _month = _month + 1
    }
  }
  if (modality == 'reduce') {
    _month - 1
    if (_month == 1) {
      _month = 12
      _year = _year - 1
    } else {
      _month = _month - 1
    }
  }
  if (_month < 10) {
    _month = '0' + _month
  }
  return _year + '-' + _month
}
//点击按钮改变时间
const onIconChangeTime = (val) => {
  //val为DArrowLeft时少一年
  if (val == 'DArrowLeft') {
    _month_time.value =
      _month_time.value.substring(0, 4) * 1 - 1 + '-' + _month_time.value.substring(5, 7)
  }
  //val为ArrowLeft时少一个月
  else if (val == 'ArrowLeft') {
    _month_time.value = onAddMonth(_month_time.value, 'reduce')
  }
  //val为DArrowRight时多一年
  else if (val == 'DArrowRight') {
    _month_time.value =
      _month_time.value.substring(0, 4) * 1 + 1 + '-' + _month_time.value.substring(5, 7)
  }
  //val为ArrowLeft时多一个月
  else {
    _month_time.value = onAddMonth(_month_time.value, 'add')
  }
  emit('onChangeTime', _month_time.value)
}
</script>
<template>
  <div class="work_card_body">
    <div class="work_card_top">
      <div>
        <el-icon @click="onIconChangeTime('DArrowLeft')"><DArrowLeft /></el-icon>
      </div>
      <div>
        <el-icon @click="onIconChangeTime('ArrowLeft')"><ArrowLeft /></el-icon>
      </div>
      <el-date-picker
        class="month_class"
        v-model="_month_time"
        type="month"
        value-format="YYYY-MM"
        :clearable="false"
        :editable="false"
        @change="onChange"
      />
      <div>
        <el-icon @click="onIconChangeTime('ArrowRight')"><ArrowRight /></el-icon>
      </div>
      <div>
        <el-icon @click="onIconChangeTime('DArrowRight')"><DArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.work_card_body {
  .work_card_top {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 50px;
    background-color: #fff;
    border-radius: 8px;
    :deep(.month_class > .el-input__wrapper) {
      box-shadow: none;
    }
    :deep(.el-input__prefix) {
      display: none;
    }
    :deep(.el-input__inner) {
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>
